  <!-- 使用方法
    src:图片地址
    blanktitle：文字说明
    buttontitle：中间按钮，默认为刷新，若需要多个按钮可覆盖slot
    @click：绑定刷新按钮事件
    例：
       <qm-blankPage
        :src="require('/static/img/blankpage/black/no-schedule.png')"
        blanktitle="暂无日程～"
        @click="goRefresh"
      >
        <template v-slot:button>
        </template>
      </qm-blankPage>
   -->

<template id="qm-blankPage">
  <div class="img-pos">
    <img class="warn-img" :src="src" />
    <p class="warn-font">{{ blanktitle }}</p>
    <div class="button-margin">
      <slot name="button">
          <f7-button large small outline round class="button" @click="goRefresh">
            <div class="btn-title">{{buttontitle}}</div>
          </f7-button>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
      default: "",
    },
    blanktitle: {
      type: String,
      required: true,
      default: "",
    },
    buttontitle:{
      type:String,
      // required:true,
      default:"刷新"
    }
  },
  methods: {
    goRefresh(){
      this.$emit("click")
    }
  },
};
</script>

<style lang="less" scoped>
.img-pos {
  text-align: center;
  margin-top: 74px;
}
.warn-img {
  width: 80%;
  /* width: 477px;
  height: 450px; */
}
.warn-font {
  font-size: var(--font-size-maintitle);
  font-weight: 400;
  color: #61677a;
  /* line-height: 45px; */
}
.button-margin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  max-width: 100%;
  line-height: normal;
  box-sizing: border-box;
  width: calc(152px * var(--ratio));
  height: calc(52px * var(--ratio));
  padding-left: 0;
  padding-right: 0;
  --f7-button-fill-pressed-bg-color: var(--color-brand);
  --f7-button-outline-border-color: var(--color-brand);
  --f7-button-fill-bg-color: var(--color-brand);
  color: var(--color-text-primary);
  .btn-title {
    height: 100%;
    width: 100%;
    font-size: var(--font-size-subcontent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.button-small{
  --f7-button-outline-border-width:1px;
}
</style>
